<template>
  <div class="mod-prod">
<!--    <div class="customForm" style="margin-bottom: 10px">-->
<!--      <el-button type="primary" class="btn" @click.stop="importExcel()">导入</el-button>-->
<!--    </div>-->
    <el-form :inline="true" :model="dataForm">
      <el-form-item label="标题/批次">
        <el-input @change="searchChange" placeholder="标题/批次" v-model="dataForm.title" size="small"></el-input>
      </el-form-item>
      <el-form-item label="用户信息">
        <el-input @change="searchChange" placeholder="姓名/手机号/身份证" v-model="dataForm.code" size="small"></el-input>
      </el-form-item>
      <el-form-item label="工厂信息">
        <el-input @change="searchChange" placeholder="工厂名称" v-model="dataForm.factoryName" size="small"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click.stop="searchChange">搜索</el-button>
      </el-form-item>
    </el-form>
    <avue-crud ref="crud"
               :page="page"
               :data="dataList"
               :table-loading="dataListLoading"
               :option="tableOption"
               @search-change="searchChange"
               @selection-change="selectionChange"
               @on-load="getDataList">
      <template slot="menuLeft">
        <el-button type="primary"
                   icon="el-icon-plus"
                   size="small"
                   @click.stop="importExcel()">导入</el-button>
      </template>

      <template slot="workerInfo" slot-scope="scope">
        <div>
          <div class="content">姓名: {{scope.row.realName}}</div>
          <div class="content">手机: {{scope.row.mobile}}</div>
          <div class="content">性别: {{scope.row.sex===1?'女':'男'}}</div>
          <div class="content">身份证: {{scope.row.idCard}}</div>
        </div>
      </template>

      <template slot="jobInfo" slot-scope="scope">
        <div>
          <div class="content">入职单位: {{scope.row.factoryName}}</div>
<!--          <div class="content">基础工资: {{scope.row.salary}}</div>-->
        </div>
      </template>

      <template slot-scope="scope"
                slot="menu">
        <el-button type="text"
                   @click="deleteHandle(scope.row.id)">删除</el-button>
      </template>
    </avue-crud>
    <import-salary ref="importSalary" @refreshDataList="refreshList"></import-salary>
  </div>
</template>

<script>
  import { tableOption } from '@/crud/worker/salary'
  import importSalary from './import-salary'
  export default {
    name: 'salary',
    components:{importSalary},
    data () {
      return {
        dataForm: {
          code: '',
          title: '',
          factoryName: ''
        },
        dataList: [],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        dataListLoading: false,
        tableOption: tableOption
      }
    },
    methods: {
      // 获取数据列表
      getDataList (page, params) {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/v1/worker/salary/list'),
          method: 'get',
          params: this.$http.adornParams(
            Object.assign(
              {
                current: page == null ? this.page.currentPage : page.currentPage,
                size: page == null ? this.page.pageSize : page.pageSize,
                title: this.dataForm.title,
                code: this.dataForm.code,
                factoryName: this.dataForm.factoryName
              }
            )
          )
        }).then(({data}) => {
          console.log(data)
          this.dataList = data.data.records
          this.page.total = data.data.total
          this.dataListLoading = false
        })
      },
      // 新增 / 修改
      audit (id) {
        this.$router.push({
          path: '/jobInfo',
          query: {id: id}
        })
      },
      // 删除
      deleteHandle (id) {
        this.$confirm(`确定进行删除操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            let param = {
              ids: [id],
            }
            this.$http({
              url: this.$http.adornUrl(`/v1/worker/salary/batch/delete`),
              method: 'post',
              data: this.$http.adornData(param)
            }).then(({data}) => {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList(this.page)
                }
              })
            })
          })
          .catch(() => {
          })
      },
      importExcel(){
        this.$refs['importSalary'].init()
        // this.$refs['upload'].$children[0].$refs.input.click()
      },
      // 条件查询
      searchChange () {
        this.getDataList(this.page, this.dataForm)
      },
      // 多选变化
      selectionChange (val) {
        this.dataListSelections = val
      },
      refreshList(){
        this.getDataList(this.page,this.dataForm)
      }
    }
  }
</script>
